<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=line-race
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
    <meta charset="utf-8">
    <style>
        .button {
            height: 25px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            justify-content: center;
            padding: 5px 12vw;
            gap: 12vw;
        }
        .button-item {
            font-size: 15px;
            border-radius: 5px;
        }
        #btn1 {
            background: #02bffd;
        }
        #btn2 {
            background: #FF6B6B;
        }
        #btn3 {
            background: greenyellow;
        }
    </style>
</head>
<body style="height: 100%; margin: 0">
<div class="button">
    <button class="button-item" id="btn1" onclick="changeCharts(1)">最近7个交易日</button>
    <button class="button-item" id="btn2" onclick="changeCharts(2)">最近15个交易日</button>
    <button class="button-item" id="btn3" onclick="changeCharts(3)">最近30个交易日</button>
</div>

<div id="container" style="height: calc(100% - 25px)"></div>
<script type="text/javascript" src="js/constant.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.net/jquery/3.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>


-->

<script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};
    var ROOT_PATH = 'https://echarts.apache.org/examples';
    var option;

    // $.get(
    //     ROOT_PATH + '/data/asset/data/life-expectancy-table.json',
    //     function (_rawData) {
    //         run(_rawData);
    //     }
    // );

    // 默认显示最近 30 个工作日的数据
    changeCharts(3)

    /**
     * 切换显示的日期
     * 标志为 1 最近7个工作日
     * 标注为 2 最近15个工作日
     * 标注为 3 最近30个工作日
     * @param val 标志
     */
    function changeCharts(val) {
        let n = 0
        if (val === 1) n = 3 * 3 + 7 * 6
        else if (val === 2) n = 3 * 3 + 15 * 6
        else if (val === 3) n = 3 * 3 + 30 * 6


        let trend = JSON.parse(localStorage.getItem("trend"))
        let tailArr = trend.slice(-n)
        let finalArr = [
            ['Income', 'Country', 'Year'],
            ...tailArr
        ]
        run(finalArr)
    }


    function run(_rawData) {
        // var countries = ['Australia', 'Canada', 'China', 'Cuba', 'Finland', 'France', 'Germany', 'Iceland', 'India', 'Japan', 'North Korea', 'South Korea', 'New Zealand', 'Norway', 'Poland', 'Russia', 'Turkey', 'United Kingdom', 'United States'];
        // const countries = [
        //     'Finland',
        //     'France',
        //     'Germany',
        //     'Iceland',
        //     'Norway',
        //     'Poland',
        //     'Russia',
        //     'United Kingdom'
        // ];
        const stockCode = localStorage.getItem("stockCode")
        const countries = [
            // stockInfo.actualHigh,
            // stockInfo.actualLow,
            // stockInfo.predictHigh,
            // stockInfo.predictLow,
            stockInfo.actual,
            stockInfo.predict,
        ];
        const datasetWithFilters = [];
        const seriesList = [];
        echarts.util.each(countries, function (country) {
            var datasetId = 'dataset_' + country;
            datasetWithFilters.push({
                id: datasetId,
                fromDatasetId: 'dataset_raw',
                transform: {
                    type: 'filter',
                    config: {
                        and: [
                            // {dimension: 'Year', gte: 1950},  // 小马修改 不限制时间
                            {dimension: 'Country', '=': country}
                        ]
                    }
                }
            });
            seriesList.push({
                type: 'line',
                datasetId: datasetId,
                showSymbol: false,
                name: country,
                endLabel: {
                    show: true,
                    formatter: function (params) {
                        // return params.value[3] + ': ' + params.value[0];
                        return params.value[1] + ': ' + params.value[0];
                    }
                },
                labelLayout: {
                    moveOverlap: 'shiftY'
                },
                emphasis: {
                    focus: 'series'
                },
                encode: {
                    x: 'Year',
                    y: 'Income',
                    label: ['Country', 'Income'],
                    itemName: 'Year',
                    tooltip: ['Income']
                }
            });
        });
        option = {
            animationDuration: 5000,
            dataset: [
                {
                    id: 'dataset_raw',
                    source: _rawData
                },
                ...datasetWithFilters
            ],
            title: {
                // text: 'Income of Germany and France since 1950'
                text: `注: 实际价格为当日最高价和最低价的均值; 预测价格为预测最高价和最低价的均值。`,
                left: 'center'
            },
            tooltip: {
                order: 'valueDesc',
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                nameLocation: 'middle'
            },
            yAxis: {
                // name: 'Income'
                name: '股票价格'
            },
            grid: {
                right: 140
            },
            series: seriesList
        };
        myChart.setOption(option);
    }

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
